<template>
  <div
    v-if="show"
    class="fixed inset-0 z-[80] flex items-center justify-center p-4"
    @click="handleBackdropClick"
  >
    <!-- 背景遮罩 -->
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

    <!-- 模态框内容 -->
    <div 
      class="relative w-full max-w-4xl h-[80vh] bg-background-900 rounded-xl shadow-2xl border border-gray-700 overflow-hidden transform transition-all duration-200"
      @click.stop
    >
      <!-- 头部 -->
              <div class="flex items-center justify-between p-4 border-b border-gray-700">
        <h2 class="text-xl font-bold text-text-primary">消息中心</h2>
        <div class="flex items-center gap-2">
          <UiButton
            variant="ghost"
            size="sm"
            @click="$emit('update:show', false)"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </UiButton>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="flex h-full">
        <!-- 侧边栏 -->
        <div class="w-64 border-r border-gray-700 bg-background-800">
          <div class="p-4">
            <div class="space-y-2">
              <button
                class="w-full text-left px-3 py-2 rounded-lg transition-colors duration-normal"
                :class="activeTab === 'messages' ? 'bg-primary text-white' : 'text-text-primary hover:bg-background-700'"
                @click="activeTab = 'messages'"
              >
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                  消息列表
                  <span 
                    v-if="unreadCount > 0"
                    class="ml-auto px-2 py-0.5 text-xs bg-error text-white rounded-full"
                  >
                    {{ unreadCount }}
                  </span>
                </div>
              </button>
              
              <button
                class="w-full text-left px-3 py-2 rounded-lg transition-colors duration-normal"
                :class="activeTab === 'settings' ? 'bg-primary text-white' : 'text-text-primary hover:bg-background-700'"
                @click="activeTab = 'settings'"
              >
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  设置
                </div>
              </button>
            </div>
          </div>
        </div>

        <!-- 主内容区域 -->
        <div class="flex-1 overflow-hidden">
          <!-- 消息列表 -->
          <div v-if="activeTab === 'messages'" class="h-full">
            <MessageList />
          </div>

          <!-- 设置（无内部滚动条） -->
          <div v-else-if="activeTab === 'settings'" class="h-full">
            <MessageSettings />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useMessages } from '../../composables/useMessages'
import MessageList from './MessageList.vue'
import MessageSettings from './MessageSettings.vue'
import { UiButton } from '../ui'

// Props
interface Props {
  show: boolean
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'update:show': [value: boolean]
}>()

// 状态
const activeTab = ref<'messages' | 'settings'>('messages')

// 使用消息composable
const { unreadCount } = useMessages()

// 处理背景点击
const handleBackdropClick = () => {
  emit('update:show', false)
}

// 监听模态框显示状态，重置标签页
watch(() => props.show, (newShow) => {
  if (newShow) {
    activeTab.value = 'messages'
  }
})
</script>
